<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <!-- <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="场景">
            <el-select v-model="searchForm.type">
              <el-option label="全部" value=""/>
              <el-option v-for="(oVal, oIdx) of status" v-bind="oVal" :key="oIdx"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form> -->
        <!-- <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div> -->
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="name" label="积分场景" />
        <el-table-column prop="score" label="奖励积分" />
        <el-table-column prop="chances_count" label="每日可获取积分次数" />
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="solve(row)"
              >编辑</el-button
            >
            <!-- <el-button type="text" class="red" @click="delRowById(row, '选中规则')"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="编辑积分规则"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="closeDialog"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="8em"
      >
        <el-form-item prop="$id" hidden />

        <el-form-item class="span-2" label="积分场景" prop="name">
          <el-input readonly
            v-model="builingForm.name"
            placeholder="积分场景"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="奖励积分" prop="score">
          <el-input
            v-model="builingForm.score"
            placeholder="实名信息"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="每日可获取次数" prop="chances_count">
          <el-input readonly=""
            v-model="builingForm.chances_count"
            placeholder="每日可获取积分次数"
          ></el-input>
        </el-form-item>

      </el-form>

      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="solveOrder"
          >确 定</el-button
        >
      </template>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit } from "@/utils/mixins";

export default {
  mixins: [table, addOrEdit],
  data: () => ({
    isLoading:true,
    showAddOrEdit:false,//查看详情弹窗
    fullscreenLoading: false,//全局loading

    tableData:[],

    searchForm:{
      page:1,
      per_page:10,
    },

    builingForm: {
      $id: "",
      name:"",//实名信息
      score:'',//手机号
      chances_count:"",//用户地址
    },

  }),


  created() {
    this.getList()
  },

  methods: {
    // 获取随手拍列表
    getList(){
      this.isLoading=true
      API.getIntegralRuleList(this.searchForm)
      .then(({ data })=>{
        this.tableData=data
        this.tableTotal=data.length
      })
      .catch()
      .finally(()=>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 处理工单详情
    solve(object){
      this.showAddOrEdit=true
      let detail=object
      let _that=this
      let loadingInstance=this.$loading({ fullscreen: true })
      _that.builingForm.$id=detail.id
      _that.builingForm.name=detail.name
      _that.builingForm.score=detail.score
      _that.builingForm.chances_count=detail.chances_count
      this.showAddOrEdit=true
      loadingInstance.close()
    },

    solveOrder(){
      let id=this.builingForm.$id
      let data={
        score:this.builingForm.score,
      }
      API.editIntegralRule(id,data).then(()=>{
        this.$message.success("修改成功！");
        this.restForm()
        this.showAddOrEdit=false
        this.getList();
      })
    },

    // 关闭弹窗
    closeDialog(){
      this.restForm()
      this.showAddOrEdit=false
    },

    restForm(){
      let _that=this
      _that.builingForm.$id=""
      _that.builingForm.name=""
      _that.builingForm.score=""
      _that.builingForm.chances_count=""
    },
  },
};
</script>

<style lang="scss" scoped></style>
